<template>
  <view class="vote-header">
    <view
      class="header-item"
      :class="[state === 0 ? 'active' : '']"
      @click="state = 0"
    >
      进行中
    </view>
    <view
      class="header-item"
      :class="[state === 1 ? 'active' : '']"
      @click="state = 1"
    >
      已结束
    </view>
    <view
      class="header-item"
      :class="[state === 2 ? 'active' : '']"
      @click="state = 2"
    >
      我参与的
    </view>
  </view>
  <view class="vote-list">
    <view
      class="vote-item"
      v-for="vote in voteList"
      :key="vote.id"
      @click="onVoteClick(vote.id)"
    >
      <image
        :src="
          vote?.url !== null
            ? base64ToBlobUrl(vote?.url as string)
            : 'https://bpic.588ku.com/templet_pic/21/01/29/4dc36ffdecd4142798c07239195a2954.jpg'
        "
        class="vote-item-img"
      />
      <view class="vote-info">
        <view style="font-size: 30rpx; color: black">{{ vote.title }}</view>
        <view>开始时间: {{ vote.startTime }}</view>
        <view>截止时间：{{ vote.endTime }}</view>
        <view class="status">{{ vote.status }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'
import type { VoteItem } from '@/types/others'
import { voteListItem } from '@/api/home'
import { base64ToBlobUrl } from '@/common/img'

const state = ref(0)

const voteList = ref<VoteItem[]>([])

const onVoteClick = (id: number) => {
  uni.navigateTo({ url: `/pages/others/voteInfo?id=${id}` })
}

watch(state, async (newState) => {
  const res = await voteListItem({ state: newState })
  voteList.value = res.data
})

onLoad(async () => {
  uni.setNavigationBarTitle({ title: '业主投票' })
  const res = await voteListItem({ state: state.value })
  voteList.value = res.data
})
</script>

<style lang="scss" scoped>
.vote-header {
  width: 100%;
  height: 100rpx;
  display: flex;
  padding: 40rpx;
  align-items: center;
  // 设置下边框阴影
  box-shadow: 0 4rpx 12rpx rgba(189, 187, 189, 0.8);
  .header-item {
    font-size: 32rpx;
    font-weight: bold;
    margin-left: 30rpx;
  }
  .active {
    color: #fca464;
    font-size: 34rpx;
  }
}
.vote-list {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10rpx;
  .vote-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10rpx 0;
    border-radius: 10rpx;
    // 设置阴影
    box-shadow: 0 4rpx 12rpx rgba(189, 187, 189, 0.8);
    .vote-item-img {
      width: 40%;
      height: 220rpx;
      border-radius: 10rpx;
    }
    .vote-info {
      width: 58%;
      height: 220rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      view {
        color: #999;
        font-size: 26rpx;
      }
      .status {
        width: 30%;
        color: #fca464;
        font-size: 30rpx;
        border: 1px solid #fca464;
        text-align: center;
        border-radius: 20rpx;
      }
    }
  }
}
</style>
